<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        textarea {
            outline: none;
        }

    </style>
</head>
<body>
    <div class="comment_box" style="width: 100%;text-align: center;position: fixed;bottom: 0px;">
        <span class="comment_solider" style="display: inline-block; width: 100px; height: 23px;line-height: 23px;    border-top-left-radius: 15px;border-top-right-radius: 15px;background-color: #f2f2f2;color: #666;font-size: 12px;">上拉</span>
        <div class="comment_send" style="display: none; width: 100%;height: 300px;">
            <textarea   id="comment_content_new" cols="30" rows="10" placeholder="你想说什么" style="padding: 20px
            ; width: 100%; border:2px solid #cfd8dc ;box-sizing: border-box;"></textarea>
            <button class="comment_link" style="display: inline-block; width: 60px;height: 35px;background-color: #00bcd4; color: #fff;text-align: center;line-height: 35px;border: 0;position: absolute;bottom: 64px; right: 7px;">发送</button>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        var flag=false;
        $(".comment_solider").on("click",function(){
            flag=!flag;
            if(flag){
                $(".comment_solider").text('下拉')
            } else {
                $(".comment_solider").text('上拉')
            }
            $(".comment_send").stop().toggle(800)

        })
        $(".comment_link").on("click",function(){
            console.log($("#comment_content_new").val());
        })
        
    </script>
</body>
</html>